body { background: rgb(0, 0, 0); }
#video_player { 
  display: table; line-height: 0;
  font-size: 0; background: rgb(255, 255, 255);
  max-width: 90%;
  margin: 0 auto;
}
#video_container { 
  position: relative;
}
#video_player div, #video_player figcaption { 
  display: table-cell;
  vertical-align: top; 
}
#video_container video { 
  position: absolute; 
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}
img{height: 10%;width: 10%;margin-left: 10%;}
#video_player figcaption { width: 25%; }
#video_player figcaption a { display: block; }
#video_player figcaption a { 
  opacity: .5;
  transition: 1s opacity; 
}
#video_player figcaption a img, figure video { 
  width: 100%; height: 25%; 
}
#video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus { opacity: 1; }
@media (max-width: 25%) {
  #video_player video, #video_player figcaption { 
    display: table-row; 
  }
#video_container { padding-top: 56.25%; }
#video_player figcaption a { 
  display: inline-block; width: 33.33%; 
}
}
